<template>
  <div class="vdetail">
    <div class="bj">
      <van-nav-bar title="订单详情" style="background: #68c5ba;width: 100%;position: fixed;top: 0;">
        <van-icon @click="routejump" name="arrow-left" slot="left" color="#FFFFFF" />
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div style="width: 100%;height: 100%;margin-top: 1.25rem;background: #f8f8f8;">
      <div class="ticket">
        <div style="width: 95%;height: 100%;">
          <div class="adult-ticket">
            <p style="color: rgb(40, 40, 40);font-weight: 600;">淄博周村全天门票</p>
          </div>
          <div class="playdate">
            <div style="height:40px;width: 100%;display: flex;align-items: center;color: rgb(40, 40, 40);font-weight: 600;font-size: 16px;">游玩日期<span
                style="font-size: 12px;margin-left: 10px;">当天有效</span></div>
            <div class="selectdate">
              <div class="selectdate-div">
                <div>今日{{Todaysdate[2]}}</div>
                <div>不可订</div>
              </div>
              <div class="selectdate-div">
                <div>明日{{Todaysdate[1]}}</div>
                <div>不可订</div>
              </div>
              <div class="selectdate-div">
                <div>后日{{Todaysdate[0]}}</div>
                <div>不可订</div>
              </div>
              <!-- <calendar class="" @change="calendarChange" :default ="false"></calendar> -->
              <div @click="vanpopup" style="display: flex;align-items: center; width: 25%;margin-left: 0.9375rem;background: #ddf1ef;color: #909090;    justify-content: center;">
                <p style="width: 100px;text-align: center;">更多日期</p>
                <van-icon name="arrow" />
              </div>
              <van-popup position="bottom" style="width: 100%;height: 300px;" v-model="riqishow">
                <div style="width: 100%;height: 2.5rem;display: flex;align-items: center;justify-content: space-around;border-bottom: #B5B5B5 solid 1px;position: fixed;background: white;">
                  <span>日</span>
                  <span>一</span>
                  <span>二</span>
                  <span>三</span>
                  <span>四</span>
                  <span>五</span>
                  <span>六</span>
                </div>
                <div style="width: 100%;height: 2.5rem;"></div>
                <div v-for="(item,index) in res" :kye="index">
                  <div style="height: 2.5rem;line-height: 2.5rem;">{{item.year}}年{{item.month}}月</div>
                  <div style="display: flex;flex-wrap: wrap;">
                    <div v-for="(data,index) in item.days" :key="index" style="display: flex;flex-direction: column;align-items: center;width: 14.2%;overflow: hidden;font-size: 12px;">
                      <div style="display: flex;flex-direction: column;width: 80%;overflow: hidden;margin-top: 4px;"
                        :class="data.class" @click="selectdate(data.enable,item.year,item.month,data.day,data.price)">
                        <span style="text-align: center;">{{data.day}}</span>
                        <div v-if="data.day == undefined"><span></span></div>
                        <div v-else style="text-align: center;"><span>￥{{data.price}}</span></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="height: 3.75rem;"></div>
              </van-popup>
            </div>
            <div style="height: 1.25rem;"></div>
          </div>
          <div class="period">
            <p style="color: rgb(40, 40, 40);font-size: 14px;">入园时间段</p>
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" />
            </van-dropdown-menu>
          </div>
          <!-- <div class="quantity">
            <div style="height: 3.75rem;width: 90%;">
              <div style="height: 3.75rem;;line-height: 3.75rem;color: #000000;font-weight: 600;">购买数量</div>
              <div style="font-size: 0.75rem;color: #969799;">每单最多可购买五票</div>
            </div>
            <div class="quantity-box">
              <van-stepper v-model="value" min="1" max="5" @change="onchange" />
            </div>
            <div style="height: 1.25rem;"></div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="select">
      <div class="select_select">
        <div class="select_box">
          <div class="select_top">
            <div>
              <span style="font-size: 18px;margin-right: 5px;">成人票</span>
              <span style="color: #46d0ca;">景区要求实名制入园</span>
            </div>
            <p style="color: #5c5c5c;">同一用户同一日期限购1单，每单可购5张票</p>
          </div>
          <span style="color: #46d0ca;font-size: 20px;">￥120</span>
        </div>
        <div class="select_bottm">
          <div style="height: 50px;" v-if="tepper == 0"></div>
          <div class="pedometer" v-else>
            <div class="protection" style="color: #5c5c5c;">
              <div>
                <van-icon name="checked" />
                <span>随时退</span>
              </div>
              <div>
                <van-icon name="checked" />
                <span>过期退</span>
              </div>
              <div>
                <van-icon name="checked" />
                <span>入园保障</span>
              </div>
            </div>
            <div class="notice">
              <span>订票须知</span>
              <van-icon name="arrow" />
            </div>
            <div class="ddto" style="color: #5c5c5c;">
              <div>添加旅</div>
              <div>添加旅</div>
              <div>添加旅</div>
              <div>添加旅</div>
              <div @click="selectLinkMan">添加旅客</div>
            </div>
            <div style="width: 100%;height: 10px;"></div>
          </div>
          <van-stepper v-model="tepper" min="0" max="5" />
          <!-- 计步器 -->
        </div>
        <div style="width: 100%;height: 10px;"></div>
      </div>

    </div>
    <div class="scheduler">
      <p class="scheduler_txt">预定人信息</p>
      <div class="scheduler_people" style="color: #5c5c5c;">
        <div>潘德利</div>
        <div>新增/更换</div>
      </div>
      <div class="scheduler_data">
        <div class="data_name">
          <span>姓名：</span>
          <input type="text" placeholder="请输入您的姓名" />
        </div>
        <div class="data_phone">
          <span>手机号：</span>
          <input type="text" placeholder="用于接受订房信息" />
        </div>
      </div>
    </div>
    <div class="terms">
      <van-checkbox v-model="checked"></van-checkbox>
      <span style="margin-left: 4px;">已阅读并通用</span>
      <span style="color: #46d0ca;margin-left: 4px;" @click="tk">安易游预定条款</span>
    </div>
    <div style="width: 100%;height: 60px;"></div>
    <div class="bottom">
      <div class="detail">
        <span style="color: #f59a23;">总额￥336</span>
        <span style="color: #46d0ca;margin-left: 10px;">明细</span>
        <van-icon name="arrow-up" />
      </div>
      <van-button type="default" color="#46d0ca" @click="Result">去支付</van-button>
    </div>
    <div class="tk_box">
      <van-popup v-model="tiaokuan" closeable position="bottom">
        <div class="tiaok_txt">
          <span>安易游预定条例</span>
          <van-icon @click="gbtk" name="close" />
        </div>
        <div style="width: 100%;height: 40px;"></div>
        <div class="tiaok" style="color: #5c5c5c;">
          <div style="margin-top: 10px;">1.服务内容</div>
          <p>安易游旅游网（以下简称“安易游”）各项服务的所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。"</p>
          <div>2.特别提示</div>
          <p>所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>
          <div>3.订单生效</div>
          <p>本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>
          <div>4.景区订单</div>
          <p>各项服务的所有权与运作权归景域旅游运营集团所有。本服务条款具有法律约束力。一旦您点选确认下单成功提交订单后，即表示您自愿接受本协议之所有条款，并同意通过青云游订购旅游产品。</p>

        </div>
      </van-popup>
    </div>

  </div>
</template>

<script>
  import {
    // ProductDetails,
    // Config,
    // DatePriceList,
  } from '@/api/home.js'
  export default {
    name: 'vdetails',
    data() {
      return {
        // isactive:true,
        tiaokuan: false, //安易游预定条例
        checked: false, //协议
        // radio: '0',
        // terms: false, //弹出协议
        arrow: false, //费用明细
        riqishow: false, //日期
        tepper: 0, //步进器
        price: '', //价格
        // riqi:true,
        data: {}, //数据
        config: [], //协议
        res: [], //日期数组
        time: '', //选择日期
        Todaysdate: [],
        name: this.$route.query.name, //获取  姓名
        phone: this.$route.query.phone, //获取 电话
        card: this.$route.query.card, //获取 身份证
        // qiri:'',//选择日期
        value1: 0,
        option1: [ //获取入园时间
          {
            text: '08:30-09:30 (余票100)',
            value: 0
          },
          {
            text: '08:30-09:30 (余票100)',
            value: 1
          },
          {
            text: '08:30-09:30 (余票100)',
            value: 2
          },
          {
            text: '08:30-09:30 (余票100)',
            value: 3
          },
          {
            text: '08:30-09:30 (余票100)',
            value: 4
          },
        ],

      };
    },
    methods: {

      getBeforeDate(num, time) { //获取当前日期的前几天
        let n = num;
        let d = '';
        if (time) {
          d = new Date(time);
        } else {
          d = new Date();
        }
        let year = d.getFullYear();
        let mon = d.getMonth() + 1;
        let day = d.getDate();
        if (day <= n) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        let s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
      },
      addDate() { //获取今天的日期
        let nowDate = new Date();
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
        }
        // console.log(date);
        let time = +date.month + '-' + date.date;
        let arr = [];
        for (let i = -2; i < 1; i++) {
          arr.push(this.getBeforeDate(i, time))
        }
        console.log(arr)
        this.Todaysdate = arr
        // this.end_time = date.year + '-' + date.month + '-' + date.date;
      },

      vanpopup() {
        this.riqishow = true;
      },
      selectdate(enable, year, month, day, money) { //选择日期
        // console.log(year, month, day);
        if (enable == 0) {
          // console.log('有')
          this.$dialog({
            message: '当前日期不可选中'
          });
        } else {
          this.time = year + '-' + month + '-' + day
          this.riqishow = false;
        }
      },
      arrowPopup() {
        this.arrow = true;
      },
      arrowtui() {
        this.arrow = false;
      },
      descPopup() { //弹出订票须知
        this.desc = true;
      },
      desctui() { //关闭订票须知
        this.desc = false;
      },
      termsPopup() { //弹出协议
        this.terms = true;
        // console.log(1)
      },
      termstui() { //关闭协议
        this.terms = false;
        // console.log(1)
      },
      onchange(value) {
        let shul = this.data.Price; //自定义一个值
        let tong = value * shul; //乘以当前计步器里面的值
        console.log(tong);
        this.price = tong;
      },
      // calendarChange(p, values, displayValues) {
      //   console.log("日历返回值：", p, values, displayValues)
      // },
      routejump() { //返回景区详情
        let ssSN = this.$route.query.ssSN
        this.$router.push({
          path: "/Scenic/product",
          query: {
            ssSN: ssSN,
          }
        })
      },
      selectLinkMan() { //跳转旅客列表
        // this.$router.push('/address');
        // let id = this.$route.query.id
        this.$router.push({
          path: "/Home/selectLinkMan",
          // query: {
          //   id: id,
          //   psn: this.$route.query.psn,
          // }
        })
      },
      tk() { //打开安易游预定条例
        this.tiaokuan = true;
      },
      gbtk() {
        this.tiaokuan = false;
      },
      Result() { //跳转订单结果
        this.$router.push({
          path: "/Home/Result",
        })
      },
      // vdetailsdata() { //订单数据请求
      //   let self = this
      //   let data = {
      //     ssSN: this.$route.query.id, //标识
      //     pSN: this.$route.query.psn,
      //   }
      //   ProductDetails(data).then(res => { //订单数据请求
      //     console.log(res);
      //     self.data = res.Item
      //     self.price = res.Item.Price
      //     // console.log(self.price)
      //   })

      //   Config().then(data => {
      //     // console.log(data)
      //     self.config = data.clausecon
      //   })
      // },
      // qiridata() { //日期数据
      //   let data = {
      //     pSN: this.$route.query.psn,
      //     Begin: "2019-9-01",
      //     End: "2019-12-31",
      //   }
      //   DatePriceList(data).then(res => {
      //     console.log(res)
      //     // debugger
      //     this.res = res.List
      //     let arr = []
      //     const arrList = res.List.map(item => { //判断日期是星期几，然后循环给几个空格
      //       // console.log(item.days[0].wi, 'shuju')
      //       if (item.days[0].wi !== 0) {
      //         let s = item.days[0].wi
      //         for (var i = 0; i < s; i++) {
      //           item.days.unshift({})
      //         }
      //       }
      //       return item;
      //     })

      //     console.log(arrList)
      //   })
      // },
      //       obtain(enable) {//选择时间
      //         // console.log(val)
      //         // let nostate =nostate
      //         if (enable == 0) {
      //           // console.log('有')
      //           this.$dialog({ message: '当前日期不可选中' });
      //         } else {
      //           console.log('无')
      //
      //         }
      //       }
    },
    mounted() {
      // this.vdetailsdata()
      // this.qiridata()
      this.addDate()
    }
  }
</script>

<style lang="scss">
  .vdetail {

    width: 100%;
    height: 100%;
    position: relative;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .bj{
      .van-nav-bar{
        position: fixed;
        width: 100%;
        left: 0;
      }
      .van-icon {
        color: white !important;

      }
    }
    .ticket {
      /* 盒子 */
      width: 100%;
      height: 18.75rem;
      // border-radius: 0.625rem;
      background: #f8f8f8;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      border-bottom: 1px solid #eaeaea;

      .adult-ticket {
        /* 成人票 */
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        border-bottom: 1px solid #eaeaea;


      }

      /* 游玩日期 */
      .playdate {
        display: flex;
        flex-direction: column;


        .selectdate {
          display: flex;

          /* align-items: center; */
          .selectdate-div {
            width: 22%;
            height: 50px;
            display: flex;
            align-items: center;
            flex-direction: column;
            font-size: 13px;
            justify-content: center;
            background: #ececec;
            margin-left: 0.625rem;
          }

          .week {
            color: #68C5BA;
          }

          .nostate {
            color: #B5B5B5;
          }

        }
      }

      .period {
        //选择入园时间
        display: flex;
        align-items: center;
        height: 50px;

        .van-dropdown-menu {
          width: 79%;
          height: 33px;
          border: 1px solid #eaeaea;
          margin-left: 10px;

          .van-dropdown-menu__title--active {
            color: #46d0ca;
          }
          .van-dropdown-item__content{
            height: 250px;
          }
        }
      }

      /* 购买数量 */
      // .quantity {
      //   display: flex;
      //   justify-content: space-between;

      //   /* border-bottom: 1px solid #eaeaea; */
      //   .quantity-box {
      //     width: 50%;
      //     display: flex;
      //     align-items: center;
      //     justify-content: center;
      //   }
      // }

    }

    .select {
      width: 100%;
      margin: 0 auto;
      background: #f8f8f8;

      .select_select {
        display: flex;
        width: 95%;
        flex-direction: column;
        margin: 0 auto;
        border-bottom: 1px solid #eaeaea;

        .select_box {
          width: 100%;
          display: flex;

          justify-content: space-between;
          font-size: 13px;
          border-bottom: 1px solid #eaeaea;
          margin-top: 20px;
        }

        .select_bottm {
          display: flex;
          justify-content: space-between;

          .pedometer {
            display: flex;
            flex-direction: column;
            width: 100%;

            .protection {
              display: flex;

              div {
                display: flex;
                align-items: center;
                margin-right: 10px;

                .van-icon {
                  font-size: 14px !important;
                }
              }
            }

            .notice {
              width: 30%;
              height: 30px;
              display: flex;
              align-items: center;
              color: #46d0ca;
            }

            .ddto {
              display: flex;
              // height: 50px;
              width: 100%;

              div {
                width: 80px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid #46d0ca;
                font-size: 14px;
                font-weight: 400;
                margin-right: 10px;
              }
            }
          }

          .van-stepper {
            position: absolute;
            right: 5px;
            margin-top: 10px;
          }
        }
      }
    }

    .scheduler {
      width: 100%;
      margin-top: 10px;
      background: #f8f8f8;

      .scheduler_txt {
        padding: 10px;
        font-size: 18px;
        font-weight: 400;
      }

      .scheduler_people {
        padding: 0 10px;
        display: flex;

        div {
          width: 80px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border: 1px solid #46d0ca;
          margin-right: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #46d0ca;
        }
      }

      .scheduler_data {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        font-size: 13px;
        div {
          display: flex;
          width: 80%;
          margin: 5px auto;

          span {
            width: 22%;
          }

          input {
            width: 78%;
            background: none;
          }
        }
      }

    }

    .terms {
      display: flex;
      margin-top: 20px;
      align-items: center;

      .van-checkbox__icon--checked .van-icon {
        background-color: #46d0ca !important;
        border-color: #46d0ca !important;

      }

      .van-icon {
        color: white !important;
        font-size: 16px !important;
      }
    }

    .bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      background: #ececec;

      .detail {
        display: flex;
        font-size: 14px;
        font-weight: 400;
      }

      .van-button {
        padding: 0px 30px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
      }
    }

    .tk_box {
      .van-popup {
        height: 450px;
        font-size: 14px;

        .tiaok_txt {
          width: 100%;
          position: fixed;
          height: 40px;
          background: white;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid #eee;

          .van-icon {
            position: absolute;
            right: 20px;
          }
        }

        .tiaok {
          width: 95%;
          margin: 0 auto;

          p {
            font-size: 12px;
          }
        }
      }
    }

  }
</style>
